<template>
  <view class="loadingWrap5"></view>
</template>

<script>
export default {
name: "Loading"
}
</script>

<style lang="scss" scoped>
.loadingWrap5 {
  position: relative;
  width: 30rpx;
  height: 30rpx;
  background: #3498db;
  border-radius: 50rpx;
  -webkit-animation: loadingWrap5 1.5s infinite linear;
  -moz-animation: loadingWrap5 1.5s infinite linear;
  -ms-animation: loadingWrap5 1.5s infinite linear;
  animation: loadingWrap5 1.5s infinite linear
}

.loadingWrap5:after {
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  border-top: 10rpx solid #9b59b6;
  border-bottom: 10rpx solid #9b59b6;
  border-left: 10rpx solid transparent;
  border-right: 10rpx solid transparent;
  border-radius: 50rpx;
  content: '';
  top: -20rpx;
  left: -20rpx;
  -webkit-animation: loadingWrap5_after 1.5s infinite linear;
  -moz-animation: loadingWrap5_after 1.5s infinite linear;
  -ms-animation: loadingWrap5_after 1.5s infinite linear;
  animation: loadingWrap5_after 1.5s infinite linear
}

@-webkit-keyframes loadingWrap5 {
  0% {
    -webkit-transform: rotate(0deg)
  }

  50% {
    -webkit-transform: rotate(180deg);
    background: #2ecc71
  }

  100% {
    -webkit-transform: rotate(360deg)
  }
}

@-webkit-keyframes loadingWrap5_after {
  0% {
    border-top: 10rpx solid #9b59b6;
    border-bottom: 10rpx solid #9b59b6
  }

  50% {
    border-top: 10rpx solid #3498db;
    border-bottom: 10rpx solid #3498db
  }

  100% {
    border-top: 10rpx solid #9b59b6;
    border-bottom: 10rpx solid #9b59b6
  }
}

@-moz-keyframes loadingWrap5 {
  0% {
    -moz-transform: rotate(0deg)
  }

  50% {
    -moz-transform: rotate(180deg);
    background: #2ecc71
  }

  100% {
    -moz-transform: rotate(360deg)
  }
}

@-moz-keyframes loadingWrap5_after {
  0% {
    border-top: 10rpx solid #9b59b6;
    border-bottom: 10rpx solid #9b59b6
  }

  50% {
    border-top: 10rpx solid #3498db;
    border-bottom: 10rpx solid #3498db
  }

  100% {
    border-top: 10rpx solid #9b59b6;
    border-bottom: 10rpx solid #9b59b6
  }
}

@-ms-keyframes loadingWrap5 {
  0% {
    -ms-transform: rotate(0deg)
  }

  50% {
    -ms-transform: rotate(180deg);
    background: #2ecc71
  }

  100% {
    -ms-transform: rotate(360deg)
  }
}

@-ms-keyframes loadingWrap5_after {
  0% {
    border-top: 10rpx solid #9b59b6;
    border-bottom: 10rpx solid #9b59b6
  }

  50% {
    border-top: 10rpx solid #3498db;
    border-bottom: 10rpx solid #3498db
  }

  100% {
    border-top: 10rpx solid #9b59b6;
    border-bottom: 10rpx solid #9b59b6
  }
}

@keyframes loadingWrap5 {
  0% {
    transform: rotate(0deg)
  }

  50% {
    transform: rotate(180deg);
    background: #2ecc71
  }

  100% {
    transform: rotate(360deg)
  }
}

@keyframes loadingWrap5_after {
  0% {
    border-top: 10rpx solid #9b59b6;
    border-bottom: 10rpx solid #9b59b6
  }

  50% {
    border-top: 10rpx solid #3498db;
    border-bottom: 10rpx solid #3498db
  }

  100% {
    border-top: 10rpx solid #9b59b6;
    border-bottom: 10rpx solid #9b59b6
  }
}
</style>